var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');//把sass文件改编为css
var browserSync = require('browser-sync').create();//监听文件，文件有改变刷新浏览器
var useref = require('gulp-useref');//合并几个相同type文件
var gulpIf = require('gulp-if');//压缩css,js使用插件
var cssnano = require('gulp-cssnano');//压缩css插件
var uglify = require('gulp-uglify');//压缩js文件
var imagemin = require('gulp-imagemin');//压缩图片
var cache = require('gulp-cache');//压缩图片时，跳过已经压缩过的。
var del = require('del');//删除不用的文件
var runSequence = require('run-sequence');//让所有的任务列队进行。而不是同时进行



gulp.task('sass',function(){
    return gulp.src('app/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});
//监听的文件sass、js、html
gulp.task('watch',['browserSync','sass'],function(){
    gulp.watch('app/scss/**/*.scss',['sass']);
    //other watchers
    gulp.watch('app/*.html',browserSync.reload);//监听html的变化
    gulp.watch('app/js/**/*.js', browserSync.reload);//监听js的变化
});
//监测文件内容改版并刷新浏览器的目录
gulp.task('browserSync',function(){//监视的文件夹
    browserSync.init({
        server: {
            baseDir:'app'
        },
    })
})

//合并压缩css、js文件
gulp.task('useref',function(){//合并几个相同type文件
    return gulp.src('app/*.html')
        .pipe(useref())//在html文件里，只要有把css和js文件嵌套进来的，都压缩
        .pipe(gulpIf('*.css',cssnano()))//对合并后css压缩
        .pipe(gulpIf('*.js',uglify()))//对合并后js压缩
        .pipe(gulp.dest('dist'))//设置合并压缩后js放在的文件夹
        
});

//压缩png,jpg,gif,svg的图片
gulp.task('images',function(){
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(cache(imagemin({
        interlaced:true
    })))
    .pipe(gulp.dest('dist/images'))
})

//如果有字体文件，字体文件是已经压缩过的。直接转移就可以
gulp.task('fonts',function(){
    return gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
})

//从本地系统中删除缓存(gulp-cache已经存储了图片的缓存在你本地系统里。)
gulp.task('cache:clear',function(callback){
    return cache.clearAll(callback)
})

//执行命令时，我们不必担心删除dist/images文件夹。因为gulp-cache已经存储了图片的缓存在你本地系统里。要从系统缓存中删除需要运行上面的命令gulp cache:clear
gulp.task('clean:dist', function() {
  return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});

//创建一个任务 确定clean:dst第一个运行
gulp.task('build',function(callback){
    runSequence('clean:dist',['sass','useref','images','fonts'],callback)
    //这里打包的时候。上面有sass和fonts不用的话可以删掉
    // runSequence('clean:dist',['useref','images'],callback)
})

// 为什么用default?因为当你有个任务叫default,你就可以很简单的使用gulp命令运行，会省去键盘的敲击次数。。
gulp.task('default',function(callback){
    runSequence(['sass','browserSync','watch'],
        callback
    );
})